<template>
  <div class="app-container">
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="resetClick">
      <template #type="scope">
        <el-select v-model="searchParam[scope.prop]" @change="setSearchParam()" v-bind="scope">
          <template v-for="option in typeList" :key="option.value">
            <el-option :label="$t(`trType.${option}`)" :value="option" />
          </template>
        </el-select>
      </template>

    </page-search>
    <PageContent ref="contentRef" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" 
      @operat-click="handleOperatClick">
      <template #type="scope">
        <el-tag>{{ scope.row[scope.prop]?$t(`trType.${scope.row[scope.prop]}`):'--' }}</el-tag>
      </template>
    </PageContent>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import usePage from "@/hooks/usePage";
import { onMounted } from "vue";
import Api from '@/api/finance/transactions'
import { tableHeightAutoAdjust } from '@/utils/common'
defineOptions({
  name: "financeTransactions",
  inheritAttrs: false,
});
const gridOptions = reactive({})
const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}
const logInfoRef = ref(null)
const handleOperatClick = (obj) => {
  if (obj.name === "details") {
    logInfoRef.value.show(obj.row.id)
  }
}
const searchParam = ref({ type: '' })
const setSearchParam = () => {
  searchRef.value.setParams(searchParam.value)
}
const resetClick = () => {
  for (let i in searchParam.value) {
    searchParam.value[i] = ''
  }
  handleResetClick()
}
const typeList = ref([])
const getType = async () => {
  const { data } = await Api.getType()
  typeList.value = data
}
onMounted(() => {
  getType()
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
})
</script>

<style></style>